<template>
  <div class="app-container">
    <div class="block">
      <el-timeline>
        <el-timeline-item
          :timestamp="item.createTime"
          placement="top"
          v-for="(item, key) in values"
          :key="key"
        >
          <el-card>
            <div style="display: flex; flex-direction: row">
              <el-date-picker
                :readonly="true"
                type="datetimerange"
                range-separator="至"
                :start-placeholder="item.startTime"
                :end-placeholder="item.endTime"
              >
              </el-date-picker>
              <h3 style="margin-left:20px">共 {{ item.requiredTime }} 天</h3>
            </div>
            <h4>章节</h4>
            <p>{{ item.name }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-button type="primary" @click="addTimePlan()">主要按钮</el-button>
      <!-- 添加时间规划 -->
      <el-dialog
        title="添加时间规划"
        :visible.sync="open"
        width="600px"
        append-to-body
      >
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <!-- 日期选择 -->
          <el-form-item label="开始及结束时间:" prop="courseName">
            <el-date-picker
              v-model="form.time"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>

          <!-- 章节选择 -->
          <el-form-item label="章节选择:" prop="courseName">
            <el-cascader
              v-model="forms.chapterId"
              :options="chapter"
              :show-all-levels="false"
              :props="{
                expandTrigger: 'hover',
                label: 'name',
                value: 'id',
                emitPath: false,
              }"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="subTime">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getTimePlan } from "@/api/course";
import { getChapters } from "@/api/course";
import { addChapter_plan, updateChapter_plan } from "@/api/teach/chapter_plan";
export default {
  data() {
    return {
      value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
      values: [],
      courseId: this.$route.query.courseId,
      open: false,
      rules: {},
      form: {},
      forms: {},
      chapter: [],
    };
  },
  created() {
    this.getTimePlan();
    this.getChapters();
  },
  methods: {
    getTimePlan() {
      getTimePlan({ courseId: this.courseId }).then((res) => {
        this.values = res.data;
      });
    },
    getChapters() {
      getChapters(this.courseId).then((res) => {
        this.chapter = this.handleTree(res.data, "id");
        console.log(this.chapter);
      });
    },
    addTimePlan() {
      this.open = true;
    },
    subTime() {
      this.forms.startTime = this.form.time[0];
      this.forms.endTime = this.form.time[1];
      this.forms.requiredTime = this.DateDiff(
        this.form.time[0],
        this.form.time[1]
      );
      addChapter_plan(this.forms).then((res) => {
        this.$message({
          message: "添加成功",
          type: "success",
        });
        this.getTimePlan();
        this.open = false;
      });
    },
    cancel() {
      this.open = false;
    },
    DateDiff(sDate1, sDate2) {
      var aDate, oDate1, oDate2, iDays;
      aDate = sDate1.split("-");
      oDate1 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]); //转换为12-18-2006格式
      aDate = sDate2.split("-");
      oDate2 = new Date(aDate[1] + "-" + aDate[2] + "-" + aDate[0]);
      iDays = parseInt(Math.abs(oDate1 - oDate2) / 1000 / 60 / 60 / 24); //把相差的毫秒数转换为天数
      return iDays;
    },
  },
};
</script>

<style scoped></style>
